<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态相册</title>
    <style type="text/css">
        body, html {
            margin: 0;
            padding: 0;
            font-size: 30px;
            font-family: '微软雅黑';
        }
        .container {
			flex: 1;
			background: url('img/02.jpg') no-repeat center center; 
			background-size: cover 
            display: flex;
            width: 100%;
            height: 100vh;
        }
        .photo-display {
            flex: 1;
            background: url('img/01.jpg') no-repeat center center; 
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
            overflow: hidden;
        }

        .photo-display img {
            width: 500px;
            height: 300px;
            border-radius: 50%;
            object-fit: cover;
            transition: opacity 0.5s ease-in-out;
        }
        .album-categories {
            flex: 1;
            padding: 20px;
			margin-top: 150px;
        }
        .search-box {
            display: flex;
            margin-bottom: 20px;
        }
        .search-box input {
            flex: 1;
            margin-right: 10px;
            padding: 20px; 
            font-size: 24px; 
        }
        .search-box button {
            padding: 5px 20px; 
            font-size: 24px; 
            cursor: pointer;
        }
        .categories {
			margin-top: 50px;
            display: flex;
            flex-direction: column;
        }
        .category-row {
            display: flex;
            justify-content: space-between;
        }
        .category {
            flex: 1;
            margin: 5px;
            padding: 10px;
            color: #3fb0ac;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-align: center;
        }
		/* #FA292A */
        .category:hover {
            background-color: red;
            border-radius: 50%;
        }
    </style>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="photo-display">
            <img src="img/images/tu.jpg" id="display-image">
        </div>
        <div class="album-categories">
            <div class="search-box">
                <input type="text" id="search-input" placeholder="搜索图片...">
                <button onclick="searchPhotos()">搜索</button>
            </div>
            <div class="categories">
                <div class="category-row">
                    <div class="category" data-category="中国国宝">中国国宝</div>
                    <div class="category" data-category="兵马俑">兵马俑</div>
                </div>
                <div class="category-row">
                    <div class="category" data-category="川菜">川菜</div>
                    <div class="category" data-category="粤菜">粤菜</div>
                </div>
                <div class="category-row">
                    <div class="category" data-category="新疆风情">新疆风情</div>
                    <div class="category" data-category="客家土楼">客家土楼</div>
                </div>
                <div class="category-row">
                    <div class="category" data-category="民族乐器">民族乐器</div>
                    <div class="category" data-category="青铜重器">青铜重器</div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
    <script type="text/javascript">
        let leaveTimeoutId;
        let currentIntervalId;

        document.querySelectorAll('.category').forEach(cat => {
            cat.addEventListener('mouseenter', e => {
                if (leaveTimeoutId) {
                    clearTimeout(leaveTimeoutId);
                    leaveTimeoutId = null;
                }
                if (currentIntervalId) {
                    clearInterval(currentIntervalId);
                    currentIntervalId = null;
                }

                const category = e.target.getAttribute('data-category');
                document.getElementById('display-image').src = `img/images/${category}/1.jpg`;
            });

            cat.addEventListener('mouseleave', e => {
                leaveTimeoutId = setTimeout(() => {
                    const category = e.target.getAttribute('data-category');
                    let count = 1;
                    currentIntervalId = setInterval(() => {
                        count = (count % 7) + 1;
                        document.getElementById('display-image').src =
                            `img/images/${category}/${count}.jpg`;
                    }, 3000);
                }, 500);
            });

            cat.addEventListener('click', e => {
                const category = encodeURIComponent(e.target.getAttribute('data-category'));
                window.location.href = `https://image.baidu.com/search/index?tn=baiduimage&word=${category}`;
            });
        });

        function searchPhotos() {
            const query = encodeURIComponent(document.getElementById('search-input').value);
            window.location.href = `https://image.baidu.com/search/index?tn=baiduimage&word=${query}`;
        }
    </script>
</body>
</html>
